<html>
<head><title>WICK Testing Ground</title>

<!-- WICK STEP 1: INSERT CSS -->
<link rel="stylesheet" type="text/css" href="./wick.css" />

</head>
<body>
<script type="text/javascript" language="JavaScript">
function checkForm() {
answer = true;
if (siw && siw.selectingSomething)
	answer = false;
return answer;
}//
</script>
<center>
<p>
Welcome to the very unpolished WICK testing ground.
A view source on this document should give you most information you need
to make WICK work on your site, as i'm still working on more formal documentation
that'll also include integration suggestions to make this work as fast as possible with
large amounts of data.
<br/><br/>
Be sure to enter multiple e-mail addresses in each field, type a few characters, hit the delete key,
use your keyboard's up and down arrows, hit return or tab to select an item, use your mouse to hover and click,
deleting from a current item back into the preceding item, and basically poke around mercilessly.
<br /><br />
<div id="wickStatus">
Loading ... please hold!
</div>
<br /><br />
<form onsubmit="return checkForm()"> <!-- WICK STEP 5: this prevents form from being submitted right-away if a user hits RETURN to select an address -->
My First Box:<br />
<input class="wickEnabled" type="text" size="50" /><br />
My Second Box:<br />
<textarea class="wickEnabled" cols="50" rows="3" wrap="virtual"></textarea>
<!-- WICK STEP 4: ADD "wickEnabled" attribute to input
that'll receive autocompletion using data stored in the "collection" array defined in STEP 2 -->
<br />
My Third Box:<br />
<textarea class="wickEnabled" cols="50" rows="3" wrap="virtual"></textarea>
<br />&#160;<br />
My Fourth Box with developer-built floater USING TABLE: SHRINKS TO CONTENTS:<br />
	<div style="position:relative;text-align:left">
		<table id="MYCUSTOMFLOATER" class="myCustomFloater" style="position:absolute;top:50px;left:0;background-color:#cecece;display:none;visibility:hidden">
		<tr><td><!--
				please see: http://chrisholland.blogspot.com/2004/09/geekstuff-css-display-inline-block.html
				to explain why i'm using a table here.
				You could replace the table/tr/td with a DIV, but you'd have to specify it's width and height
				-->
			<div class="myCustomFloaterContent">
			you should never be seeing this
			</div>
		</td></tr>
		</table>
		<textarea class="wickEnabled:MYCUSTOMFLOATER" cols="50" rows="3" wrap="virtual"></textarea>
	</div>
<br />
some content lah lah lah
<br />
<!--
My Fourth Box with developer-built floater USING DIV: FIXED WIDTH/HEIGHT:<br />
	<div style="position:relative;text-align:left">
		<div id="MYCUSTOMFLOATER_TWO" class="myCustomFloater" style="position:absolute;top:50px;left:0;background-color:#cecece;width:300px;height:400px;display:none;visibility:hidden">
			<div class="myCustomFloaterContent">
			you should never be seeing this
			</div>
		</div>
		<textarea class="wickEnabled:MYCUSTOMFLOATER_TWO" cols="50" rows="3" wrap="virtual"></textarea>
	</div>
-->
<br />
My Fifth Box:<br />
<input class="wickEnabled" type="text" size="50" /><br />
</form>
</p>
</center>
<script type="text/javascript" language="JavaScript" src="./sample_data.js"></script> <!-- WICK STEP 2: DEFINE COLLECTION ARRAY THAT HOLDS DATA -->
<script type="text/javascript" language="JavaScript" src="./wick.js"></script> <!-- WICK STEP 3: INSERT WICK LOGIC -->
<script>
document.getElementById("wickStatus").innerHTML = '<a target="_blank" href="./buscalineas2.php">Loaded <b>' + collection.length + '</b> Sample Addresses</a>';
</script>
</body>
</html>